<template>
	<view class="voice-chat-modal-wrap" v-if='voiceModalShow'>
		<view class="bg"></view>
		<view class="voice-chat-modal">
			<view class="info">
				<image class='photo' :src="voiceChatUser.avatar || ''" mode="aspectFill"></image>
				<view class="name">
					{{voiceChatUser.nick || voiceChatUser.nickname || ''}}
					<view class="tip-text">
						<text>邀请你进行语音通话</text>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn cancel" @click="cancel">拒绝</view>
				<view class="btn confirm" @click="confirm">接受</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				audio: null,
				userId:null
			}
		},
		computed: {
			...mapState(['voiceModalShow', 'voiceChatUser'])
		},
		watch: {
			voiceModalShow(nval) {
				if (nval) {
					// let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
					// this.userId = userInfo.id;
					// this.addVideo()
					this.audio = uni.createInnerAudioContext()
					this.audio.src = './../../static/audio/voice_chat_tips.mp3'
					this.audio.autoplay = true
					this.audio.loop = true
					this.audio.play()
				} else {
					// this.deleteVideo()
					if (this.audio) {
						this.stopAudio()
					}
				}
			}
		},
		onShow(option) {
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.userId = userInfo.id;
			this.addVideo()
		},
		onHide() {
			this.deleteVideo()
		},
		methods: {
			deleteVideo() {
				uni.$utils.postrequest("/api/delete_video", {
					user_id: this.userId
				}, res => {})
			},
			addVideo() {
				uni.$utils.postrequest("/api/add_video", {
					user_id: this.userId
				}, res => {})
			},
			cancel() {
				let message = this.tim.createCustomMessage({
					// to: this.toUserInfo.id,
					to: this.voiceChatUser.id.toString(),
					conversationType: 'C2C',
					// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
					// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
					// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
					payload: {
						data: 'voiceChatCancel', // 用于标识该消息类型
						description: 'voiceChatCancel', // 用于装载url
						extension: ''
					}
				});
				this.tim.sendMessage(message);
				uni.removeStorageSync('roomid');
				this.stopAudio()
				this.$store.commit('setVoiceChatUser', null)
				this.$store.commit('setVoiceModalShow', false)
			},
			confirm() {
				this.$store.commit('setVoiceModalShow', false)
				uni.navigateTo({
					url: '../TRTC/TRTC?join=1'
				});
				this.stopAudio()
			},
			stopAudio() {
				this.audio.pause();
				this.audio.stop();
				this.audio.destroy()
				this.audio = null
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: 0.6);
		z-index: 200;
	}

	.voice-chat-modal {
		position: fixed;
		width: 80%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 262upx;
		margin: auto;
		border: 1px solid #DCDCDC;
		background: #fff;
		border-radius: 10upx;
		overflow: hidden;
		z-index: 201;

		.info {
			display: flex;
			padding: 40upx 20upx;

			.name {
				color: #B977FD;

				.tip-text {
					color: #C3C3C3;
				}
			}

			.photo {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 40upx;
			}
		}

		.btns {
			display: flex;
			border-top: 1upx solid #dcdcdc;
			background-color: #E2E2E2;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20upx 0;
				color: #fff;
			}

			.confirm {
				background-color: #B977FD;
				border-top-left-radius: 100upx;
				border-bottom-left-radius: 100upx;
				border-left: 6upx solid #fff;
			}

			.cancel {
				background-color: #E2E2E2;
			}
		}
	}
</style>
